<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/menu1.css" />
    <title>练习02 实现菜单的收缩与扩展</title>
</head>
<body>
    <div id="leftNav" class="left-nav">
        <div id="myMenu" class="menuBox">
            <ul class="spMenuBox">
                <li class="spMenuItem active" onclick="ShowSub(this)">
                    <div class="spMenu">
                        <i class="fa fa-folder-open"></i>
                        <span>菜单1</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" style="display: block;">
                        <li><span class="subMenu">菜单1.1</span></li>
                        <li><span class="subMenu">菜单1.2</span></li>
                        <li><span class="subMenu">菜单1.3</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" onclick="ShowSub(this)">
                    <div class="spMenu">
                        <i class="fa fa-folder"></i>
                        <span>菜单2</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" style="display: none;">
                        <li><span class="subMenu">菜单2.1</span></li>
                        <li><span class="subMenu">菜单2.2</span></li>
                        <li><span class="subMenu">菜单2.3</span></li>
                        <li><span class="subMenu">菜单2.4</span></li>
                        <li><span class="subMenu">菜单2.5</span></li>
                        <li><span class="subMenu">菜单2.6</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" onclick="ShowSub(this)">
                    <div class="spMenu">
                        <i class="fa fa-folder"></i>
                        <span>菜单3</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" style="display: none;">
                        <li><span class="subMenu">菜单3.1</span></li>
                        <li><span class="subMenu">菜单3.2</span></li>
                        <li><span class="subMenu">菜单3.3</span></li>
                        
                    </ul>
                </li>
                <li class="spMenuItem" onclick="ShowSub(this)">
                    <div class="spMenu">
                        <i class="fa fa-folder"></i>
                        <span>菜单4</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" style="display: none;">
                        <li><span class="subMenu">菜单4.1</span></li>
                        <li><span class="subMenu">菜单4.2</span></li>
                        <li><span class="subMenu">菜单4.3</span></li>
                        <li><span class="subMenu">菜单4.4</span></li>
                    </ul>
                </li>
                <li class="spMenuItem" onclick="ShowSub(this)">
                    <div class="spMenu">
                        <i class="fa fa-folder"></i>
                        <span>菜单5</span>
                        <i class="fa fa-2x fa-angle-down"></i>
                    </div>
                    <ul class="subMenuBox" style="display: none;">
                        <li><span class="subMenu">菜单5.1</span></li>
                        <li><span class="subMenu">菜单5.2</span></li>
                        <li><span class="subMenu">菜单5.3</span></li>
                        <li><span class="subMenu">菜单5.4</span></li>
                        <li><span class="subMenu">菜单5.5</span></li>
                    </ul>
                </li>
            </ul>
        </div>
    
    </div>
</body>
<script>
	//199000749 许业娜
		 function ShowSub(li) {
		     var subMenu = li.getElementsByClassName("subMenuBox")[0];
			 var i=li.getElementsByTagName("i")[0];
			 var file = li.getElementsByClassName("spMenu")[0];
			 files = file.parentNode;
			 
		     if (subMenu.style.display == "none") {
		         subMenu.style.display = "block";
				 i.setAttribute("class","fa fa-folder-open");
				 files.setAttribute("class","spMenuItem active");
		     }
		     else
			 {
		         subMenu.style.display = "none";
				 i.setAttribute("class","fa fa-folder");
				 files.setAttribute("class","spMenuItem");
		     }
		 }
		 
		 
		 
	</script>

</html>